<template>
  <div class="user-management-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="handleEdit($event)"
        >
          添加
        </el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="12">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-input
              v-model.trim="queryForm.MatchString"
              clearable
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>
    <el-table
      ref="tableSortRef"
      v-loading="listLoading"
      :border="border"
      :data="list"
      :height="height"
      :size="lineHeight"
      :stripe="stripe"
      @selection-change="setSelectRows"
    >
      <el-table-column
        v-for="(item, index) in finallyColumns"
        :key="index"
        align="center"
        :label="item.label"
        :prop="item.prop"
        :sortable="item.sortable"
        width="auto"
      >
        <template slot-scope="scope">
          <!-- <span v-if="item.label === 'BOM状态'">
            <template v-if="scope.$index % 2 == 0">
              <el-tag type="success">已编辑</el-tag>
            </template>
            <template v-else>
              <el-tag type="warning">未编辑</el-tag>
            </template>
          </span> -->
          <span>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        show-overflow-tooltip
        width="300"
      >
        <template slot-scope="scope">
          <el-button text type="primary" @click="handleEdit1(scope.row)">
            添加
          </el-button>
          <el-button text type="primary" @click="handleEdit(scope.row)">
            修改
          </el-button>
          <el-button text type="danger" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
      <template slot="empty">
        <el-empty class="vab-data-empty" description="暂无数据" />
      </template>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <!-- <el-dialog :close-on-click-modal="false"  :visible="dialogVisible" title="BOM清单录入" width="60%">
      <el-descriptions direction="vertical" :column="1" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            {{ form.ProductId }}
          </template>
          <el-tag size="small">产品编号</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            {{ form.CreateTime }}
          </template>
          申请时间
        </el-descriptions-item>
      </el-descriptions>
      <div style="margin-top: 30px">
        <el-descriptions
          title="BOM清单"
          direction="vertical"
          :column="1"
          border
        >
          <el-descriptions-item label="">
            <template slot="label">
              <i class="el-icon-user"></i>
              {{ form.ProductId }}
            </template>
            <div>
              <el-table :data="form.BOM" style="width: 100%">
                <el-table-column label="工序" prop="OPId">
                  <template slot="default">OP10</template>
                </el-table-column>
                <el-table-column label="设备" prop="DeviceTypes">
                  <template slot="default">
                    <p>VM10</p>
                    <p>VM10</p>
                    <p>VM10</p>
                  </template>
                </el-table-column>
                <el-table-column label="刀具" prop="KnifeType">
                  <template slot="default">
                    <p>10mm锉刀</p>
                    <p>10mm锉刀</p>
                    <p>10mm锉刀</p>
                  </template>
                </el-table-column>
                <el-table-column label="毛坯" prop="MaterialType">
                  <template slot="default">T001</template>
                </el-table-column>
                <el-table-column label="夹具" prop="TrayType">
                  <template slot="default">T001</template>
                </el-table-column>
              </el-table>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <template slot="footer">
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submit">保存</el-button>
        </span>
      </template>
    </el-dialog> -->

    <el-dialog
      :close-on-click-modal="false"
      :visible="dialogVisible"
      :title="title"
      width="60%"
      :before-close="handleClose"
    >
      <el-form :model="form" class="demo-dynamic" label-position="top">
        <el-form-item label="产品编号">
          <el-input v-model="form.ProductId"></el-input>
        </el-form-item>
        <el-form-item
          v-for="(domain, index) in form.BOM"
          label="BOM"
          :key="index"
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <!-- <el-input
                v-model="domain.OPId"
                placeholder="请输入工序编号"
              ></el-input> -->

              <el-select v-model="domain.OpId" placeholder="选择工序编号">
                <el-option
                  v-for="item in OpIdList"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select
                multiple
                v-model="domain.DeviceTypes"
                placeholder="请选择设备"
              >
                <el-option
                  v-for="(item, index) in DeviceType"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select
                multiple
                v-model="domain.MaterialType"
                placeholder="请选择毛坯类型"
              >
                <el-option
                  v-for="(item, index) in MaterialType"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select
                multiple
                v-model="domain.TrayType"
                placeholder="请选择托盘/夹具"
              >
                <el-option
                  v-for="(item, index) in TrayType"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="24" style="margin-top: 30px">
              <div>刀具</div>
              <vab-form-table
                v-model="domain.KnifeType"
                drag
                :row-template="rowTemplate"
                style="width: 100%"
              >
                <el-table-column align="center" label="刀具类型" prop="Type">
                  <template #default="{ row, $index }">
                    <el-select
                      v-model="row.KnifeInfoType"
                      placeholder="请选择刀具类型"
                      @change="(e) => change(e, $index)"
                    >
                      <el-option
                        v-for="(item, index) in KnifeInfos"
                        :key="index"
                        :label="item.Type"
                        :value="index"
                      >
                        <span style="float: left">{{ item.Type }}</span>
                        <span
                          style="float: right; color: #8492a6; font-size: 13px"
                        >
                          {{ item.BladeLength }} {{ item.Diameter }}
                          {{ item.Rangle }} {{ item.Material }}
                        </span>
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="刃长" prop="BladeLength">
                  <template #default="{ row }">
                    <el-input v-model="row.BladeLength" />
                  </template>
                </el-table-column>
                <el-table-column align="center" label="直径" prop="Diameter">
                  <template #default="{ row }">
                    <el-input v-model="row.Diameter" />
                  </template>
                </el-table-column>
                <el-table-column align="center" label="R角" prop="Rangle">
                  <template #default="{ row }">
                    <el-input v-model="row.Rangle" />
                  </template>
                </el-table-column>
                <el-table-column align="center" label="材质" prop="Material">
                  <template #default="{ row }">
                    <el-input v-model="row.Material" readonly />
                  </template>
                </el-table-column>
              </vab-form-table>
            </el-col>
          </el-row>
          <!--  -->
        </el-form-item>
      </el-form>
      <template slot="footer">
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button @click="addDomain">添加工序</el-button>
          <el-button type="primary" @click="submit">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      :visible="dialogVisible1"
      title="添加"
      width="60%"
      :before-close="handleClose1"
    >
      <el-form :model="form1" class="demo-dynamic" label-position="top">
        <el-form-item label="产品编号">
          <el-input v-model="form1.ProductId" readonly></el-input>
        </el-form-item>
        <el-form-item
          v-for="(domain, index) in form1.BOM"
          label="BOM"
          :key="index"
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <!-- <el-input
                v-model="domain.OPId"
                placeholder="请输入工序编号"
              ></el-input> -->

              <el-select v-model="domain.OpId" placeholder="选择工序编号">
                <el-option
                  v-for="item in OpIdList"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select
                multiple
                v-model="domain.DeviceTypes"
                placeholder="请选择设备"
              >
                <el-option
                  v-for="(item, index) in DeviceType"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select
                multiple
                v-model="domain.MaterialType"
                placeholder="请选择毛坯类型"
              >
                <el-option
                  v-for="(item, index) in MaterialType"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select
                multiple
                v-model="domain.TrayType"
                placeholder="请选择托盘/夹具"
              >
                <el-option
                  v-for="(item, index) in TrayType"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="24" style="margin-top: 30px">
              <div>刀具</div>
              <vab-form-table
                v-model="domain.KnifeType"
                drag
                :row-template="rowTemplate"
                style="width: 100%"
              >
                <el-table-column align="center" label="刀具类型" prop="Type">
                  <template #default="{ row, $index }">
                    <el-select
                      v-model="row.KnifeInfoType"
                      placeholder="请选择刀具类型"
                      @change="(e) => change1(e, $index)"
                    >
                      <el-option
                        v-for="(item, index) in KnifeInfos"
                        :key="index"
                        :label="item.Type"
                        :value="index"
                      >
                        <span style="float: left">{{ item.Type }}</span>
                        <span
                          style="float: right; color: #8492a6; font-size: 13px"
                        >
                          {{ item.BladeLength }} {{ item.Diameter }}
                          {{ item.Rangle }} {{ item.Material }}
                        </span>
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="刃长" prop="BladeLength">
                  <template #default="{ row }">
                    <el-input v-model="row.BladeLength" />
                  </template>
                </el-table-column>
                <el-table-column align="center" label="直径" prop="Diameter">
                  <template #default="{ row }">
                    <el-input v-model="row.Diameter" />
                  </template>
                </el-table-column>
                <el-table-column align="center" label="R角" prop="Rangle">
                  <template #default="{ row }">
                    <el-input v-model="row.Rangle" />
                  </template>
                </el-table-column>
              </vab-form-table>
            </el-col>
          </el-row>
          <!--  -->
        </el-form-item>
      </el-form>
      <template slot="footer">
        <span class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取消</el-button>
          <el-button @click="addDomain1">添加工序</el-button>
          <el-button type="primary" @click="submit1">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import VabFormTable from '@/extra/VabFormTable'
  import {
    BomManagerList,
    BomOPNewly,
    FloBomListChart,
    BOMDelete,
    Predata,
    BOMGet,
    BomManagerNewly,
    BomManagerRenew,
  } from '@/api/product'

  export default {
    components: { VabFormTable },
    data() {
      return {
        TrayInfoData: [],
        rowTemplate: {
          KnifeInfoType: '',
          BladeLength: '',
          Diameter: '',
          Rangle: '',
        },
        form: {
          BOM: [
            {
              OPId: '',
              DeviceTypes: [],
              KnifeType: [],
              TrayType: [],
              MaterialType: [],
            },
          ],
          ProductId: '',
        },
        form1: {
          BOM: [
            {
              OPId: '',
              DeviceTypes: [],
              KnifeType: [],
              TrayType: [],
              MaterialType: [],
            },
          ],
          ProductId: '',
        },
        form1Data: {},
        radio: 3,
        formLabelWidth: '100px',
        dialogVisible: false,
        dialogVisible1: false,
        tableSortRef: null,
        editRef: null,
        border: true,
        height: this.$baseTableHeight(1),
        stripe: false,
        lineHeight: 'small',
        isFullscreen: false,
        checkList: ['产品编号', '产品名称', 'BOM状态'],
        columns: [
          {
            label: '产品编号',
            prop: 'ProductId',
          },
          {
            label: '产品名称',
            prop: 'ProductName',
          },
          {
            label: 'BOM状态',
            prop: 'BomState',
          },
        ],
        list: [],
        imageList: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          MatchString: '',
        },
        title: '添加',
        historyData: [],
        OpIdList: [
          'OP1',
          'OP2',
          'OP3',
          'OP4',
          'OP5',
          'OP6',
          'OP7',
          'OP8',
          'OP9',
          'OP10',
        ],
        KnifeInfos: [],
        DeviceType: [],
        MaterialType: [],
        TrayType: [],
      }
    },
    computed: {
      finallyColumns() {
        return this.columns.filter((item) =>
          this.checkList.includes(item.label)
        )
      },
    },
    created() {
      this.fetchData()
      Predata().then((res) => {
        console.log('Predata', res)
        this.DeviceType = res.DeviceType
        this.KnifeInfos = res.KnifeInfos
        this.MaterialType = res.MaterialType
        this.TrayType = res.TrayType
      })
    },
    methods: {
      change(e, index) {
        let { Type, BladeLength, Diameter, Rangle, Material } =
          this.KnifeInfos[e]
        this.form.BOM[0]['KnifeType'][index]['KnifeInfoType'] = Type
        this.form.BOM[0]['KnifeType'][index]['Material'] = Material
        this.form.BOM[0]['KnifeType'][index]['BladeLength'] = BladeLength
        this.form.BOM[0]['KnifeType'][index]['Diameter'] = Diameter
        this.form.BOM[0]['KnifeType'][index]['Rangle'] = Rangle
      },
      change1(e, index) {
        console.log('this.KnifeInfos[e]', this.KnifeInfos[e])
        let { Type, BladeLength, Diameter, Rangle, Material } =
          this.KnifeInfos[e]
        this.form1.BOM[0]['KnifeType'][index]['KnifeInfoType'] = Type
        this.form1.BOM[0]['KnifeType'][index]['Material'] = Material
        this.form1.BOM[0]['KnifeType'][index]['BladeLength'] = BladeLength
        this.form1.BOM[0]['KnifeType'][index]['Diameter'] = Diameter
        this.form1.BOM[0]['KnifeType'][index]['Rangle'] = Rangle
      },
      handleEdit1(row) {
        this.form1 = {
          BOM: [
            {
              OPId: '',
              DeviceTypes: [],
              KnifeType: [],
              TrayType: [],
              MaterialType: [],
            },
          ],
          ProductId: '',
        }
        this.form1.ProductId = row.ProductId
        this.dialogVisible1 = true
        return false
        BOMGet({ ProductId: row.ProductId }).then((res) => {
          console.log('修改修改修改111111', res)
          if (res.Message == 'Success') {
            this.form1.ProductId = res.ProductId
            this.form1Data = {
              BOM: res.Bom,
              ProductId: res.ProductId,
            }
            this.dialogVisible1 = true
          } else {
            this.$baseMessage(res.Message, 'error', 'vab-hey-message-error')
          }
        })
      },
      handleAddistoryLog(row) {
        HistoryProcessLog({
          ProductId: row.ProducationId,
          Index: 0,
          Count: 10,
        }).then((res) => {
          this.dialogVisible2 = true
          this.historyData = res.ProductInfo
        })
      },
      setBom(row) {
        BomManagerInfo({ ProductId: row.ProducationId }).then((res) => {
          console.log(res)
          this.dialogVisible1 = true
        })
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      submit1() {
        BomManagerNewly(this.form1).then((res) => {
          this.$baseMessage('提交成功', 'success', 'vab-hey-message-success')
          this.dialogVisible1 = false
          this.fetchData()
        })
      },
      submit() {
        this.form.CreateTime = this.days()
        BomManagerRenew(this.form).then((res) => {
          this.$baseMessage('提交成功', 'success', 'vab-hey-message-success')
          this.dialogVisible = false
          this.fetchData()
        })
      },
      removeDomain(item) {
        var index = this.form.BOM.indexOf(item)
        if (index !== -1) {
          this.form.BOM.splice(index, 1)
        }
      },
      addDomain() {
        this.form.BOM.push({
          OPId: '',
          DeviceTypes: [],
          KnifeType: [],
          TrayType: [],
          MaterialType: [],
        })
      },
      addDomain1() {
        this.form1.BOM.push({
          OPId: '',
          DeviceTypes: [],
          KnifeType: [],
          TrayType: [],
          MaterialType: [],
        })
      },
      handleEdit(row) {
        if (row.ProductId) {
          this.title = '修改'
          console.log('修改修改修改', row)
          BOMGet({ ProductId: row.ProductId }).then((res) => {
            console.log('修改修改修改111111', res)
            if (res.Message == 'Success') {
              this.form = {
                BOM: res.Bom,
                ProductId: res.ProductId,
              }
            } else {
              this.$baseMessage(res.Message, 'error', 'vab-hey-message-error')
            }
          })
        } else {
          this.title = '添加'
          // this.dialogVisible1 = true
        }
        this.dialogVisible = true
      },
      handleDelete(row) {
        console.log('rowrowrow', row.ProducationId)
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          const { msg } = await BOMDelete({
            ProductId: row.ProductId,
          })
          // $baseMessage(msg, 'success', 'vab-hey-message-success')
          await this.fetchData()
        })
        return false
        if (row.id) {
          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await doDelete({ ids: row.id })
            this.$baseMessage(msg, 'success', 'vab-hey-message-success')
            await this.fetchData()
          })
        } else {
          if (this.selectRows.length > 0) {
            const ids = this.selectRows.map((item) => item.id).join()
            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
              const { msg } = await doDelete({ ids })
              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
              await this.fetchData()
            })
          } else {
            this.$baseMessage('未选中任何行', 'error', 'vab-hey-message-error')
          }
        }
      },
      handleClose() {
        this.dialogVisible = false
      },
      handleClose1() {
        this.dialogVisible1 = false
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const params = {
          Index: this.getPage(this.queryForm.pageNo, this.queryForm.pageSize),
          Count: this.queryForm.pageSize,
          MatchString: this.queryForm.MatchString,
        }
        BomManagerList(params).then((res) => {
          this.list = res.PartInfo
          this.total = res.TotalCount
          this.listLoading = false
        })
      },
    },
  }
</script>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
